<!-- ResultCard.vue -->
<template>
    <div class="card result-card shadow-sm">
        <div style="float: right;position: absolute;right: 2px;top: 2px;z-index: 1">
            <a-badge
                :text="getExt(item.name)"
                :dotStyle="{ background: '#E5E6EB', color: '#86909C','border-radius':'10px' }"/>
        </div>
        <!-- 双图布局（same/different） -->
        <template v-if="status === 'same' || status === 'different'">
            <a-row>
                <a-col :md="12">
                    <div class="checkbox-cell left">
                        <input
                            class="form-check-input"
                            type="checkbox"
                            :checked="isItemSelected('left')"
                            @change="onCheckboxChange('left', $event.target.checked)"
                        />
                    </div>
                    <Media :filename="item.name" :folder="folder1" :width="140"/>
                </a-col>
                <a-col :md="12">
                    <div class="checkbox-cell-r right">
                        <input
                            class="form-check-input"
                            type="checkbox"
                            :checked="isItemSelected('right')"
                            @change="onCheckboxChange('right', $event.target.checked)"
                        />
                    </div>
                    <Media :filename="item.name" :folder="folder2" :width="140"/>
                </a-col>
            </a-row>
        </template>

        <!-- 单图布局（missing） -->
        <template v-else>
            <div class="row g-0">
                <div class="col-12 p-2 d-flex flex-column align-items-center position-relative">
                    <div class="checkbox-cell">
                        <input
                            class="form-check-input"
                            type="checkbox"
                            :value="item.name"
                            :checked="isItemSelected(missingSide)"
                            :data-side="missingSide"
                            :data-status="status"
                            @change="onCheckboxChange(missingSide, $event.target.checked)"
                        />
                    </div>
                    <Media :filename="item.name" :folder="activeFolder"/>
                </div>
            </div>
        </template>

        <!-- 卡片底部 -->
        <div class="card-body pt-1 text-center" style="padding: 10px">
            <div class="filename small text-truncate" :title="item.name">
                <div>
                    <a-tag :color="statusColor">{{ statusText }}</a-tag>
                </div>
                {{ item.name }}

            </div>
            <!-- 对比按钮（仅 same/different） -->
            <div v-if="status === 'same' || status === 'different'" class="mt-2">
                <a-button
                    type="outline"
                    @click="emit('open-compare', item.name, folder1, folder2)"
                >
                    🔍 对比查看
                </a-button>
            </div>
        </div>
    </div>
</template>

<script setup>
import {defineProps, defineEmits, computed} from 'vue';
import Media from './Media.vue';
import {getExt} from '../utils/utils';

// ======================== Props
const props = defineProps({
    item: {
        type: Object,
        required: true,
    },
    folder1: {
        type: String,
        required: true,
    },
    folder2: {
        type: String,
        required: true,
    },
    status: {
        type: String,
        validator: (val) =>
            ['same', 'different', 'missing_in_1', 'missing_in_2'].includes(val),
        required: true,
    },
    selectedSides: {
        type: Array,
        default: () => [],
    },
    checked: {
        type: Boolean,
        default: false,
    },
    // 👇 接收当前已选中的项目列表（来自父组件）
    selectedItems: {
        type: Array,
        default: () => [],
    },
});

// ======================== Emits
const emit = defineEmits(['checkbox-change', 'open-compare', 'open-modal']);

// ======================== 计算属性
const activeFolder = computed(() => {
    return props.status === 'missing_in_2' ? props.folder1 : props.folder2;
});

const missingSide = computed(() => {
    return props.status === 'missing_in_2' ? 'left' : 'right';
});

const isChecked = (side) => {
    return props.selectedSides.includes(side);
};
// 状态文本和样式
const statusText = computed(() => {
    switch (props.status) {
        case 'same':
            return '✅ 相同';
        case 'different':
            return '⚠️ 内容不同';
        case 'missing_in_2':
            return '➕ 右边缺少';
        case 'missing_in_1':
            return '➖ 左边缺少';
        default:
            return '';
    }
});
const statusColor = computed(() => {
    switch (props.status) {
        case 'same':
            return 'green';
        case 'different':
            return 'red';
        case 'missing_in_2':
            return 'orangered';
        case 'missing_in_1':
            return 'pinkpurple';
        default:
            return '';
    }
});
// ======================== 事件处理
// ✅ 核心：判断某个 name + side 是否已在 selectedItems 中
const isItemSelected = (side) => {
    return props.selectedItems.some(
        (sel) => sel.name === props.item.name && sel.side === side
    );
};
const onCheckboxChange = (side, checked) => {
    emit('checkbox-change', {
        name: props.item.name,
        side,
        status: props.status,
        checked,
    });
};
</script>

<style scoped>
/* 卡片容器 */
.result-card {
    background-color: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 0.375rem;
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
}

/* ========== 关键修复 ========== */
/* 删除了 .result-card:hover .checkbox-cell { opacity: 1 } */
/* 现在复选框始终显示 */

/* 复选框容器 - 始终可见 */
.checkbox-cell {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 10;
    opacity: 1; /* 始终显示，不再设置为 0 */
    transition: opacity 0.2s ease;
}
.checkbox-cell-r {
    position: absolute;
    top: 8px;
    z-index: 10;
    opacity: 1; /* 始终显示，不再设置为 0 */
    transition: opacity 0.2s ease;
}

/* 复选框输入框 */
.form-check-input {
    width: 1.2em;
    height: 1.2em;
    margin: 0;
    cursor: pointer;
}

/* 媒体容器 */
.media-container {
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.media-container img,
.media-container video {
    max-height: 200px;
    max-width: 100%;
    object-fit: contain;
}

/* 文件名 */
.filename {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
    margin-bottom: 4px;
    color: #495057;
}

.card-body {
    padding-top: 0.25rem;
}

.btn-outline-info {
    font-size: 0.85rem;
    padding: 0.25rem 0.5rem;
}

.text-center {
    text-align: center;
}
</style>
